<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/3060Ti.css">
</head>
<body>
    <header>
        <div class="i">
            <div class="inner container">
                <h1><a href="index.html">灵光显卡铺</a></h1>
                <div>

                    <a href="javascript:void(0);" id="toShopCart">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <title>我的购物车</title>
                            <path fill="none" d="M0 0h24v24H0V0z"></path>
                            <path d="M17,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S18.1,18,17,18z"></path>
                            <path d="M7,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S8.1,18,7,18z"></path>
                            <path d="M15.6,13c0.6,0,1.3-0.4,1.6-1l3.6-6.6C21.1,5,21,4.4,20.5,4.1C20,3.9,19.4,4,19.1,4.5L15.5,11h-7L6.2,6L5.2,4L4.3,2H1v2
                                    h2l3.6,7.6L5.2,14c-0.7,1.3,0.2,3,1.8,3h12v-2H7l1.1-2H15.6z"></path>
                        </svg>
                    </a>
                    <a href="javascript:void(0);" id="loginBtn">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                            <title>我的账户</title>
                            <path fill="none" d="M0 0h24v24H0V0z"></path>
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM7.07 18.28c.43-.9 3.05-1.78 4.93-1.78s4.51.88 4.93 1.78C15.57 19.36 13.86 20 12 20s-3.57-.64-4.93-1.72zm11.29-1.45c-1.43-1.74-4.9-2.33-6.36-2.33s-4.93.59-6.36 2.33C4.62 15.49 4 13.82 4 12c0-4.41 3.59-8 8-8s8 3.59 8 8c0 1.82-.62 3.49-1.64 4.83zM12 6c-1.94 0-3.5 1.56-3.5 3.5S10.06 13 12 13s3.5-1.56 3.5-3.5S13.94 6 12 6zm0 5c-.83 0-1.5-.67-1.5-1.5S11.17 8 12 8s1.5.67 1.5 1.5S12.83 11 12 11z"></path>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
        <div class="o">
            <div class="outer container">
                <a href="javascript:void(0);">资讯</a>
                <a href="shopList.html">产品 & 商城</a>
            </div>
        </div>
    </header>

<main>
    <div class="hero">
        <div class="inner container">
            <div class="heroText">
                <p class="heroTitle">GEFORCE RTX 3060Ti 系列</p>
                <p class="heroSmallTitle">强者致胜</p>
                <p class="heroContent">GeForce RTX™ 30 系列 GPU 可为游戏玩家和创作者带来震撼的性能表现。该系列 GPU 采用NVIDIA 第 2 代 RTX — NVIDIA Ampere架构，搭载的全新 RT Core、Tensor Core 和流式多处理器可带来逼真的光线追踪效果和强大的 AI 性能。</p>
                <p class="heroPrice">售价 ￥2999 元起</p>
                <div class="buyBtn" @click="noBuy">
                    立即购买
                </div>
            </div>
        </div>
    </div>
    <div class="tabs">
        <div class="inner container">
            <div @click="isInt = true" :style="{backgroundColor : isInt?'#76b900':'transparent'}">
                介绍
            </div>
            <div @click="isInt = false" :style="{backgroundColor : !isInt?'#76B900':'transparent'}">
                详细信息
            </div>
        </div>
        <div class="border container"></div>
    </div>
    <div class="contents container">
        <div class="introduction" v-show="isInt">
            <img src="./images/3060tii.png" alt="">
        </div>
        <div class="detail" v-show="!isInt">
			<p class="tableTitle">规格</p>
			<table>
              <tbody>
                <tr>
                  <td></td>
                  <td>RTX 3060 Ti</td>
                  <td>RTX 3060</td>
                </tr>
                <tr>
                  <td>NVIDIA CUDA Core 核心数量</td>
                  <td>4864</td>
                  <td>3584</td>
                </tr>
                <tr>
                  <td>加速频率</td>
                  <td>1.67</td>
                  <td>1.78</td>
                </tr>
                <tr>
                  <td>显存容量</td>
                  <td>8 GB</td>
                  <td>12 GB</td>
                </tr>
                <tr>
                  <td>显存类型</td>
                  <td>GDDR6</td>
                  <td>GDDR6</td>
                </tr>
              </tbody>
            </table>
        </div>
    </div>
</main>

<footer>
    <div class="mail container">
        <div class="mailImg">
            <img src="./images/mail.png" alt="">
        </div>
        <div class="mailInfo">
            订阅我们的新资讯、新商品 与 优惠信息
        </div>
        <form action="">
            <input type="email" placeholder="您的邮箱" required>
            <input type="submit" value="提交">
        </form>
    </div>
    <div class="copyright">
        <div class="inner container">
            &copy;2020 LingGuang Griphics Shop. <a href="javascript:void(0);">隐私</a>
        </div>
    </div>
</footer>
<div id="loginLayout">
    <div class="container login">
        <div class="loginTabs">
            <button onclick="window.location.href = 'login.html'">登录</button>
            <button onclick="window.location.href = 'reg.html'">注册</button>
        </div>
    </div>
</div>

<script src="./js/tools.js"></script>
<script src="./js/header.js"></script>
<script src="./js/vue-2.6.12.js"></script>
<script>
    const vm = new Vue({
        el: 'main',
        data: {
            isInt: true
        },
        methods: {
            noBuy() {
                alert('你买不到的，放弃吧！')
            }
        }
    })
</script>
</body>
</html>